<template>
  <div>
    <vxe-toolbar custom  ref="toolbarRef" >
      <template #buttons>
        <el-button
                type="primary"
                icon="el-icon-plus"
                @click="handleAdd"
                v-if="this.editable"
        >
          选择订单项
        </el-button>
      </template>
      <template #tools>

        <el-tooltip content="清空筛选" placement="top">
          <vxe-button  icon="vxe-icon-delete" class="tool-btn" @click="$refs.tableRef.clearFilter()" circle></vxe-button>
        </el-tooltip>

        <vxe-button  icon="vxe-icon-refresh" class="tool-btn" @click="refresh" circle style="margin-right: 12px;"></vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-grid
            v-bind="gridOptions"
            id="tableRef"
            ref="tableRef"
            show-footer
            class="mytable-scrollbar"
            :data="list"
            :edit-rules="validRules"
            :tooltip-config="{ zIndex: 9999 }"
            :customConfig="customConfig"
            :menu-config="menuConfig"
            :footer-method="footerMethod"
            :edit-config="{
                trigger: 'click',
                mode: 'row',
                showUpdateStatus: true,
                showInsertStatus: true,
                beforeEditMethod:beforeEdit}"
            @edit-closed="editClosedEvent"
            @edit-actived="editActivedEvent"
            @menu-click="contextMenuClickEvent">


      <template #quantity_edit="scope">
        <!--<vxe-input v-model="row.tabNo" type="text"></vxe-input>-->
        <vxe-input v-model="scope.row.quantity" type="integer"  max="99999999" :controls="false"
                   @change="(value)=>calNum(value.value,scope)"
                   @blur="(value)=>checkNum(scope.row.quantity, scope.row)"
        ></vxe-input>
      </template>

      <template #btn_default="{ row }">
        <template v-if="!isActiveStatus(row) && this.editable">
          <!--<el-tooltip content="修改" placement="top">-->
          <!--<el-button-->
          <!--size="small"-->
          <!--type="primary"-->
          <!--@click="handleUpdate(row)"-->
          <!--&gt;修改-->
          <!--</el-button>-->
          <!--</el-tooltip>-->

          <el-tooltip content="删除" placement="top">
            <el-button
                    icon="el-icon-delete"
                    link
                    size="small"
                    type="primary"
                    @click="handleDelete(row)"
            ></el-button>
          </el-tooltip>
        </template>
        <template v-else>
        </template>
      </template>
    </vxe-grid>
    <select-order-item ref="selectOrderItemRef" @setOrderItemList="setOrderItemList" :notificationType="notificationType"></select-order-item>
    <!--<select-require ref="selectRequire" @setRequire="setRequire"></select-require>-->
    <!--<select-material ref="selectMaterial" @setMaterial="setMaterial"></select-material>-->
  </div>
</template>

<script>
    import {findList, getMaxItemNo} from "@/api/anwise/logistics/asn_item";
    import {overflowNum} from "@/api/anwise/logistics/asn_main";
    import {checkByCalc, workListSelect} from "@/api/anwise/material/bom_list";
    import {mapGetters} from "vuex";
    import {VXETable} from 'vxe-table'
    import {getDictionary} from "@/api/system/dict"
    import {select} from "@/api/base/region";
    import {Pattern} from "@/utils/validate.js";
    import selectOrderItem from './select_order_item.vue';
    // import selectRequire from './select_require.vue';
    // import selectMaterial from './select_material.vue';
    import {select as supplierSelect} from "@/api/anwise/supplier";
    import {markRaw} from "vue"


    export default {
        components: {
            selectOrderItem,
        //     selectRequire,
        //     selectMaterial
        },
        data() {
            return {
                props: {
                    label: 'nodeName',
                    value: 'id',
                },
                maxNo:0,
                asnNo:'',
                dateFormat: 'YYYY-MM-DD',
                pickerOptions: {},
                editRow:{},
                rowIndex:'',
                box: false,
                purchaseType:'正常',
                supplierId:'',
                isEdit:false,
                iconSearch:true,
                customerNo:'',
                bankId:'',
                factoryId:"",
                searchShow:false,
                provinceList:[],
                cityList:[],
                editable:true,
                list: [],
              notificationType:"ASN",
                customConfig: {
                    storage: true,
                    checkMethod({column}) {
                        if (['facName'].includes(column.field)) {
                            return false
                        }
                        return true
                    },
                },
                menuConfig: {},
                form: {},
                query: {},
                loading: true,
                data: [],
                selectionList: [],
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                subVisible: false,
                direction: 'rtl',
                customerName: "ASN项",
                customerTypeList: [],
                nameOptions: [{data: null}],
                validRules: {
                    quantity: [
                        {required: true, message: '数量必须填写'}
                    ],

                },
                gridOptions: {
                    height: '400px',
                    border: true,
                    showOverflow: true,
                    keepSource: true,
                    size: "medium",
                    rowConfig: {
                        // keyField: 'id',
                        isHover: true
                    },
                    columnConfig: {
                        resizable: true
                    },
                    // editRules: ,
                    columns: [
                        // {type: 'checkbox', width: 50, fixed:'left', visible: true},
                        // {type: 'seq', width: 50, fixed:'left', align: "center"},
                        {
                            title: "ASN Item",
                            field: "asnItem",
                            maxlength:1000,
                            minWidth: 150,
                            fixed:'left',
                        },
                        {
                            title: "Order No",
                            field: "piNo",
                            maxlength:1000,
                            minWidth: 150,
                          filters: [{ data: '' }],
                          filterRender: { name: 'FilterInput'}
                        },
                        {
                            title: "Order Item",
                            field: "orderItem",
                            minWidth: 150,
                        },
                        {
                            title: "Customer PO",
                            field: "poNo",
                            minWidth: 150,
                        },
                        {
                            title: "Material Code",
                            field: "productCode",
                            minWidth: 150,
                          filters: [{ data: '' }],
                          filterRender: { name: 'FilterInput'}
                        },
                        {
                            title: "Material Name",
                            field: "productName",
                            minWidth: 200,
                          filters: [{ data: '' }],
                          filterRender: { name: 'FilterInput'}
                        },
                        {
                            title: "Product Code",
                            field: "customerCode",
                            minWidth: 200,
                          filters: [{ data: '' }],
                          filterRender: { name: 'FilterInput'}
                        },
                        {
                            title: "Bank Name",
                            field: "bankName",
                            minWidth: 200,
                        },
                        {
                            title: "Description",
                            field: "description",
                            minWidth: 200,
                        },
                        {
                            title: "Brand",
                            field: "brand",
                            minWidth: 120,
                        },
                        // {
                        //     title: "类别",
                        //     field: "category",
                        //     minWidth: 120,
                        // },
                        {
                            title: "QTY",
                            field: "quantity",
                            minWidth: 120,
                            editRender: {placeholder: '请输入...', autofocus: '.vxe-input--inner', autoselect: true},
                            slots: {edit: 'quantity_edit'}
                        },
                        {
                            title: "Pack",
                            field: "packNum",
                            minWidth: 120,
                            // editRender: {placeholder: '请输入...', autofocus: '.vxe-input--inner', autoselect: true},
                            // slots: {edit: 'price_edit'}
                        },
                        {
                            title: "No.ctn",
                            field: "ctnNum",
                            minWidth: 120,
                        },
                        {
                            title: "G.W/ctn",
                            field: "ctnGw",
                            minWidth: 120,
                        },
                        {
                            title: "Total G.W",
                            field: "totalGw",
                            minWidth: 120,
                        },
                        {
                            title: "N.W/ctn",
                            field: "ctnNw",
                            minWidth: 120,
                        },
                        {
                            title: "Total N.W",
                            field: "totalNw",
                            minWidth: 120,
                        },
                        {
                            title: "Size(cm)",
                            field: "size",
                            minWidth: 250,
                            align:'center',
                            children:[
                                {
                                    title: "L",
                                    field: "length",
                                    minWidth: 120,
                                },
                                {
                                    title: "W",
                                    field: "width",
                                    minWidth: 120,
                                },
                                {
                                    title: "H",
                                    field: "height",
                                    minWidth: 120,
                                },
                            ],
                        },
                        {
                            title: "Total cbm",
                            field: "totalCbm",
                            minWidth: 120,
                        },
                        {
                            title: "Ready date",
                            field: "readyDate",
                            minWidth: 150,
                        },
                        {
                            field: 'btn',
                            title: '操作',
                            minWidth: 120,
                            align: "center",
                            fixed: "right",
                            visible: true,
                            slots: {default: 'btn_default'}
                        }
                    ]
                },
                supplierDic:[]
            };
        },
        computed: {
            ...mapGetters(["permission"]),
            permissionList() {
                return {
                    addBtn: this.validData(this.permission.asn_main_add, false),
                    viewBtn: this.validData(this.permission.asn_main_view, false),
                    delBtn: this.validData(this.permission.asn_main_delete, false),
                    editBtn: this.validData(this.permission.asn_main_edit, false)
                };
            },
            ids() {
                let ids = [];
                this.selectionList.forEach(ele => {
                    ids.push(ele.id);
                });
                return ids.join(",");
            },
            subIds() {
                let ids = [];
                this.selectionListSub.forEach(ele => {
                    ids.push(ele.id);
                });
                return ids.join(",");
            }
        },
        mounted() {
            this.isEdit = false;
            this.disabledCommit(false);
            this.init();
            this.$nextTick(() => {
                console.log(this.$refs.tableRef)
                console.log(this.$refs.toolbarRef)
                this.$refs.tableRef.connect(this.$refs.toolbarRef);
            })
        },
        methods: {
            init(){
                supplierSelect().then(res=>{
                    this.supplierDic = res.data.data;
                })
            },
            async setOrderItemList(list) {
                console.log("setOrderItemList", list);
                const $table = this.$refs.tableRef
                let selectData = markRaw(list);
                if (list.length > 0) {
                    this.$emit("disabledFiled", true);
                }
                const existsList = this.$refs.tableRef.getTableData().fullData;
                let $ref = this.$refs;
                let $this = this;
                if (!$table.getEditRecord()) {
                    // selectData.forEach((item)=> {
                  for (let i = 0; i<selectData.length; i++) {
                    let item = selectData[i];
                    if (!existsList.some((val) => val.piNo === item.idNo && val.orderItem === item.itemNo)) {
                      let length = 0, width = 0, height = 0;
                      if (item.packContent) {
                        let array = item.packContent.split('X');
                        length = array[0] || 0;
                        width = array[1] || 0;
                        height = array[2] || 0;
                      }
                      console.log("$ref", $ref);
                      let maxNo = 0;
                      if ($this.$refs.tableRef.getTableData().fullData.length > 0) {
                        maxNo = Number($this.$refs.tableRef.getTableData().fullData[$this.$refs.tableRef.getTableData().fullData.length - 1].asnItem);
                      }
                      let obj = {
                        asnItem: maxNo + 1,
                        piNo: item.idNo,
                        orderItem: item.itemNo,
                        poNo: item.custPo,
                        productCode: item.materialNo,
                        productName: item.materialName,
                        customerCode: item.barCode,
                        description: item.materialDesc,
                        brand: item.mtz,
                        quantity: Number(item.num) - Number(item.deliNum),
                        // maxQuantity:item.num-item.deliNum,
                        packNum: item.maxNum,
                        ctnGw: item.cost,
                        ctnNw: item.salesNum,
                          length: this.$toFixed(length * 100,2),
                          width: this.$toFixed(width * 100,2),
                          height: this.$toFixed(height * 100,2),
                        readyDate: item.deliDate,
                          bankName: item.companyName,
                          ctnNum:0,
                          totalGw:0,
                        totalNw:0,
                        totalCbm:0,
                      };
                      // console.log("obj", obj)
                      // new Promise((resolve, reject) =>{
                      await overflowNum(obj).then(res => {
                        obj.quantity = res.data.data;
                        if (obj.packNum > 0) {
                          obj.ctnNum = Math.ceil(obj.quantity / obj.packNum);
                          obj.totalGw = this.$toFixed(obj.ctnNum * obj.ctnGw,2);
                          obj.totalNw = this.$toFixed(obj.ctnNum * obj.ctnNw,2);
                          obj.totalCbm = this.$toFixed(obj.ctnNum * (obj.length * obj.width * obj.height / 1000000),2);
                        }
                        // resolve(obj);
                        $this.$refs.tableRef.insertAt(obj, -1);
                      })
                      // }).then((obj)=>{
                      //   console.log(obj)

                      // });8
                    }
                  }
                    // });
                }
                // setTimeout(() =>{
                //     this.$refs.tableRef.sort('asnItem','asc')
                // },500)

            },
            changePurchaseType(value) {
                this.purchaseType = value;
            },
            setData(editable,asnNo) {
                if(asnNo){
                    this.query.asnNo = asnNo
                    this.asnNo = asnNo
                }
                console.log("aaaaaa", this.idNo)
                // this.customerId = customerId
                this.onLoad(this.page)

                this.editable = editable;
                console.log(this.editable);
            },
            updateStatus(scope){
                this.$refs.tableRef.updateStatus(scope);
            },
            calcSum(list, field) {
                let count = 0
                list.forEach(item => {
                    count += Number(item[field])
                })
                if (field == 'quantity' || field == 'ctnNum') {
                    return count.toFixed(0);
                } else {
                    return this.$toFixed(count,2);
                }
            },
            // 在值发生改变时更新表尾合计
            updateFooterEvent (params) {
                let xTable = this.$refs.tableRef
                xTable.updateFooter()
            },
            footerMethod(table) {
                return [
                    table.columns.map((column, columnIndex) => {
                        if (columnIndex === 0) {
                            return '合计'
                        }
                        if ([ 'quantity','totalGw','totalNw','totalCbm','ctnNum'].includes(column.field)) {
                            return this.calcSum(table.data, column.field)
                        }
                        return null
                    })
                ]
            },
            calNum(num,scope) {
                console.log("num",num);
                this.$refs.tableRef.updateStatus(scope);
                let row=scope.row;
                if (num && row.packNum >0) {
                    row.ctnNum= Math.ceil(num / row.packNum);
                    row.totalGw= this.$toFixed(row.ctnNum * row.ctnGw,2);
                    row.totalNw= this.$toFixed(row.ctnNum * row.ctnNw,2);
                    row.totalCbm = this.$toFixed(row.ctnNum * (row.length * row.width * row.height/1000000),2);
                }
            },
            checkNum(num, row) {
               overflowNum(row).then(res => {
                    if (num > res.data.data) {
                        row.quantity = res.data.data;
                        // this.$refs.tableRef.updateStatus(scope);
                        if (row.packNum >0) {
                            row.ctnNum = Math.ceil(row.quantity / row.packNum);
                            row.totalGw = this.$toFixed(row.ctnNum * row.ctnGw, 2);
                            row.totalNw = this.$toFixed(row.ctnNum * row.ctnNw, 2);
                            row.totalCbm = this.$toFixed(row.ctnNum * (row.length * row.width * row.height / 1000000), 2);
                        }
                        this.updateFooterEvent();
                        this.$message({
                            type: "warning",
                            message: "数量不能大于["+row.quantity+"]!"
                        });
                    }
                })
            },
            refresh(){
                this.page = {
                    pageSize: 10,
                    currentPage: 1,
                }
                this.query = {}
                this.onLoad(this.page)
            },
            pageChange(e){
                this.page = {
                    pageSize: e.pageSize,
                    currentPage: e.currentPage,
                }
                this.onLoad(this.page)
            },

            isActiveStatus(row) {
                const $table = this.$refs.tableRef
                if ($table) {
                    return $table.isEditByRow(row)
                }
            },
            clearAll() {
                this.data = [];
                this.$refs.tableRef.remove();
            },
            handleAdd() {
                if (!this.customerNo) {
                    this.$message({
                        type: "error",
                        message: "请先选择客户!"
                    });
                    return;
                }
                if (!this.factoryId) {
                    this.$message({
                        type: "error",
                        message: "请先选择工厂!"
                    });
                    return;
                }
                // if (this.asnNo) {
                //     getMaxItemNo(this.asnNo).then(res => {
                //         if (res.data.success) {
                //             this.maxNo = res.data.data;
                //         }
                //     })
                // } else {
                //     this.maxNo = this.$refs.tableRef.getTableData().fullData.length;
                // }
                console.log("this.list",this.list);
                this.$refs.selectOrderItemRef.showSelect(this.$refs.tableRef.getTableData().fullData, this.customerNo, this.bankId,this.factoryId);
                // this.isEdit = true;
                // const $table = this.$refs.tableRef
                // if (!$table.getEditRecord()) {
                //     console.log(this.tableRef)
                //     if ($table) {
                //         const obj = $table.insertAt({}, -1).then(res => {
                //             $table.setEditCell(res.row, 'facName');
                //         })
                //         console.log(obj)
                //         // this.searchShow = false
                //         // this.iconSearch = false
                //     }
                // }
            },
            contextMenuClickEvent(data) {
                const menu = data.menu;
                const row = data.row;
                const column = data.column;
                const $table = this.$refs.tableRef
                if ($table) {
                    switch (menu.code) {
                        case 'hideColumn':
                            $table.hideColumn(column)
                            break
                        case 'showAllColumn':
                            $table.resetColumn(true)
                            break
                        case 'copy':
                            // if (XEClipboard.copy(row[column.field])) {
                            //   ElMessage.success('保存成功')
                            // }
                            // ElMessage.success('复制成功')
                            break
                        case 'reload':
                            //  findList()
                            break
                        case 'insertAt':
                            $table.insertAt({}, row || -1).then(({row}) => {
                                $table.setEditCell(row, column || 'name')
                            })
                            break
                        case 'remove':
                            $table.remove(row)
                            break
                        case 'save':
                            // ElMessage.success('保存成功')
                            break
                    }
                }
            },
            disabledCommit(data) {
                this.$emit("disabledCommit",data);
            },
            editActivedEvent(row){//激活单元格事件
                this.isEdit = true;
                this.disabledCommit(true);
            },
            editClosedEvent(row) {
                console.log(row)
                const $table = this.$refs.tableRef;
                $table.clearValidate();
                this.disabledCommit(false);
                // const $table = this.$refs.tableRef
                // console.log($table.getTableData().fullData);
                // const err = this.validEvent(row.row);
                // if (err) {
                //     return
                // }
                // if (row.column.field=='prodNum') {
                //     this.overflowNum(row.row.prodNum, row.row);
                // }

            },
            async handleSaveRow(row) {
                const err = await this.validEvent(row);
                if (err) {
                    return
                }

            },
            async validEvent(row) {
                const $table = this.$refs.tableRef
                const errMap = await $table.validate(row).catch(errMap => errMap)
                return errMap;

            },
            formatType(value) {
                let value2 = "";
                this.customerTypeList.forEach(res => {
                    if (value === res.dictKey) {
                        value2 = res.dictValue;
                    }
                });
                return value2
            },

            // 主表模块
            rowSave(row, done, loading) {
                add(row).then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    done();
                }, error => {
                    window.console.log(error);
                    loading();
                });
            },
            rowUpdate(row, index, done, loading) {
                update(row).then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    done();
                }, error => {
                    window.console.log(error);
                    loading();
                });
            },
            rowDel(row) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(row.id);
                    })
                    .then(() => {
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                    });
            },
            async handleDelete(row) {
                console.log("row",this.list);
                const $table = this.$refs.tableRef
                if (row.id) {
                    this.$confirm('是否确认删除?', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }).then(() => {
                        if ($table.getTableData().fullData.length === 1) {
                            this.$emit("disabledFiled", false);
                        }
                        $table.remove(row)

                    }).then(() => {
                      this.$message({type: "success", message: "操作成功，保存后生效!"});
                    })
                } else {
                    console.log("$table.getTableData().fullData.length",$table.getTableData().fullData.length);
                    if ($table.getTableData().fullData.length === 1) {
                        this.$emit("disabledFiled", false);
                    }
                    $table.remove(row)

                }
            },
            // handleDelete() {
            //   if (this.selectionList.length === 0) {
            //     this.$message.warning("请选择至少一条数据");
            //     return;
            //   }
            //   this.$confirm("确定将选择数据删除?", {
            //     confirmButtonText: "确定",
            //     cancelButtonText: "取消",
            //     type: "warning"
            //   })
            //     .then(() => {
            //       return remove(this.ids);
            //     })
            //     .then(() => {
            //       this.onLoad(this.page);
            //       this.$message({
            //         type: "success",
            //         message: "操作成功!"
            //       });
            //       this.$refs.crud.toggleSelection();
            //     });
            // },
          beforeEdit({ row, rowIndex, column, columnIndex }) {
            if (this.editable) {

            }
            return this.editable;
          },
            beforeOpen(done, type) {
                if (["edit", "view"].includes(type)) {
                    getDetail(this.form.id).then(res => {
                        this.form = res.data.data;
                    });
                }
                done();
            },
            searchReset() {
                this.query = {};
                this.onLoad(this.page);
            },
            searchChange(params, done) {
                this.query = params;
                this.page.currentPage = 1
                this.onLoad(this.page, params);
                done();
            },
            selectionChange(list) {
                this.selectionList = list;
            },
            selectionClear() {
                this.selectionList = [];
                if(this.$refs.crud)  this.$refs.crud.toggleSelection();
            },
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            formateDate(list) {
              list.forEach(item => {
                  // item.maxQuantity = item.orderNum;
              })
            },
            onLoad(page, params = {}) {
                this.query.asnNo = this.asnNo;
                if (this.$refs.tableRef.getInsertRecords().length>0 || this.$refs.tableRef.getRemoveRecords().length>0 ||
                    this.$refs.tableRef.getUpdateRecords().length>0) {
                    this.$confirm("搜索会丢失本次新增/编辑/删除的数据，确定继续吗?", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            this.loading = true;
                            console.log('aaaaaaaaaaaa', this.query)
                            findList(Object.assign(params, this.query)).then(res => {
                                const data = res.data.data;
                                // this.page.total = data.total;
                                this.list = data;
                                this.loading = false;
                                this.selectionClear();
                                this.isEdit = false;
                                this.formateDate(this.list);
                            });
                        })
                }else {
                    this.loading = true;
                    console.log('aaaaaaaaaaaa', this.query)
                    findList(Object.assign(params, this.query)).then(res => {
                        const data = res.data.data;
                        // this.page.total = data.total;
                        this.list = data;
                        this.loading = false;
                        this.selectionClear();
                        this.isEdit = false;
                        this.formateDate(this.list);
                    });
                }
            },

        }
    };
</script>

<style scoped>
  :deep(.vxe-pulldown.size--medium){
    z-index: 99999 !important;
  }
  .vxe-table--tooltip-wrapper {
    z-index: 10000 !important;
  }
  :deep(.vxe-table--fixed-right-wrapper){
    z-index: 99999 !important;
  }
  :deep(.vxe-table--render-default.size--medium .vxe-header--column:not(.col--ellipsis)) {
    padding: 1px 0 !important;
  }
</style>
